<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/shouji.css" >
    <script src="js/jquery-2.0.3.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/shouji.js"></script>
    <script src="css/animate.css"></script>
</head>
<body>
<!--活动链接-->
<a href="" class="pass" style="display:block;width:100%;height:10px"></a>
<!--导航-->
<div class="newHome-head" id="newhome">
    <div class="newHome-head-top">
        <ul class="aa">
            <li>会员卡激活</li>
            <li>讲师查询</li>
            <li>校园活动</li>
        </ul>
        <ul class="bb">
            <li>客户服务</li>
            <li>我的校妆</li>
            <li>我的订单</li>
            <li>【注册】</li>
            <li>【登陆】</li>
        </ul>
    </div>
    <div class="newHome-head-center">
        <img class="a" src="img/1.png" alt="">
        <div class="b">
            <input id="a" type="text" placeholder="请输入你要搜索的内容">
            <div class="b2 ">
                <img src="img/search.png">
                <p><b>搜索</b></p>
            </div>
            <ul class="ba">
                <li>热门 ：</li>
                <li>SKIN79</li>
                <li>SUNSHOP</li>
                <li>乳液</li>
                <li>护肤套装</li>
                <li>保湿补水</li>
                <li>面膜</li>
                <li>BB霜</li>
                <li>美白</li>
            </ul>
        </div>
        <img class="c" src="img/2.png" alt="">
    </div>
    <div class="newHome-head-nav">
        <div class="dropdown" id="nav">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true" style="background: mediumvioletred;">
                全部商品分类
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu3" style="left :380px;top:58px;">
                <li style="height: 3px;"><a href="#" style="height: 0px;"></a></li><hr>
                <li><a href="#">面部护理<br><br>防嗮隔离&nbsp&nbsp&nbsp面膜<br>眼部护理&nbsp&nbsp&nbsp护肤套装</a>
                    <div class="subnav" style="height:0px;">
                        <em class="arrow"></em>
                        <p style="background: url(images/body2.png);">
                       <span>
                        <a href="javascript:;"><b>洁面</b></a><a>洁面乳</a><a>磨砂去角质</a><a>洁面皂</a><a>洁面膏</a><a>洁面霜</a><a>洁面泡沫</a><a>洁面啫喱</a><a>洁面粉</a><a>洁面摩丝</a><br>
                        <a href="javascript:;"><b>化妆水</b></a><a>柔肤水</a><a>爽肤水</a><a>喷雾</a><a>紧肤水</a><a>洁肤水</a><a>调理水</a><a>纯露/花水</a><a>保湿水</a><a>其他化妆水</a><br>
                        <a href="javascript:;"><b>乳液</b></a><a>日乳</a><a>晚乳</a><br>
                        <a href="javascript:;"><b>防晒隔离</b></a><a>防晒霜/乳</a><a>隔离霜/乳</a><a>防晒喷雾</a><a>晒后修复</a><br>
                        <a href="javascript:;"><b>面膜</b></a><a>免洗面膜</a><a>清洗型面膜</a><a>面贴膜</a><a>撕拉面膜</a><br>
                        <a href="javascript:;"><b>精华</b></a><a>原液</a><a>精华</a><br>
                        <a href="javascript:;"><b>面霜</b></a><a>日霜</a><a>晚霜</a><br>
                        <a href="javascript:;"><b>眼部护理</b></a><a>眼霜</a><a>眼贴/膜</a><a>眼啫喱</a><a>礼盒/套装</a>|<br>
                        <a href="javascript:;"><b>唇部护理</b></a><a>润唇膏</a><a>唇膜</a><a>去角质</a><br>
                        <a href="javascript:;"><b>T区/颈部护理</b></a><a>吸油面纸</a><a>鼻膜</a><a>黑头导出</a><a>颈膜</a><a>颈霜</a><br>
                        <a href="javascript:;"><b>护肤套装</b></a><a>礼盒/套装</a><a>迷你套装</a>
                    </span>
                        </p>
                    </div>
                </li><hr>
                <li><a href="#">时尚彩妆<br><br>防嗮隔离&nbsp&nbsp&nbsp面膜<br>眼部护理&nbsp&nbsp&nbsp护肤套装</a>
                    <div class="subnav" style="height:0px;">
                        <em class="arrow"></em>
                        <p style="background: url(images/body2.png);">
                    <span>
                        <a href="javascript:;"><b>面部妆容</b></a><a>BB霜</a><a>遮瑕笔</a><a>粉饼</a><a>粉底液/霜</a><a>散粉/蜜粉</a><a>腮红胭脂</a><a>CC霜</a><a>妆前乳</a><br>
                        <a href="javascript:;"><b>眼部妆容</b></a><a>睫毛膏/液</a><a>眼线膏/笔/液</a><a>眉笔/眉粉</a><a>眼影</a><a>睫毛滋养液</a><br>
                        <a href="javascript:;"><b>唇部妆容</b></a><a>唇彩</a><a>唇膏</a><a>唇蜜</a><br>
                        <a href="javascript:;"><b>卸妆</b></a><a>卸妆液</a><a>卸妆油</a><a>卸妆乳</a><a>卸妆水</a><a>眼唇卸妆</a><br>
                        <a href="javascript:;"><b>美甲</b></a><a>指甲油</a><a>指甲水</a><br>
                        <a href="javascript:;"><b>彩妆套装</b></a><a>彩妆组合</a><a>礼盒/套装</a><a>彩妆盘</a>
                    </span>
                        </p>
                    </div>
                </li><hr>
                <li><a href="#">个人护理<br><br>防嗮隔离&nbsp&nbsp&nbsp面膜<br>眼部护理&nbsp&nbsp&nbsp护肤套装</a>
                    <div class="subnav" style="height:0px;">
                        <em class="arrow"></em>
                        <p style="background: url(images/body2.png);">
                    <span>
                         <a href="javascript:;"><b>口腔护理</b></a><a>牙膏/牙粉</a><a>牙刷</a><a>漱口水</a><a>牙线</a><br>
                        <a href="javascript:;"><b>身体润肤</b></a><a>润肤乳</a><a>润肤霜</a><a>润肤油</a><br>
                        <a href="javascript:;"><b>沐浴清洁</b></a><a>沐浴露</a><a>浴盐</a><a>香皂</a><a>泡泡浴</a><a>走珠香体露</a><br>
                        <a href="javascript:;"><b>手足护理</b></a><a>护手</a><a>洗手</a><a>按摩</a><a>护足</a><br>
                        <a href="javascript:;"><b>洗护套装</b></a><a>手部护理套装</a><a>身体护理套装</a><a>口腔护理套装</a><br>
                        <a href="javascript:;"><b>秀发洗护</b></a><a>洗发露</a><a>护发素</a><a>焗油膏</a><a>营养水</a><a>发膜</a><a>精华素</a><br>
                        <a href="javascript:;"><b>染发/造型</b></a><a>染发</a><a>发蜡</a><a>弹力素</a><a>发胶手</a><a>美甲工具</a>
                    </span>
                        </p>
                    </div>
                </li><hr>
                <li><a href="#">美体/工具<br><br>防嗮隔离&nbsp&nbsp&nbsp面膜<br>眼部护理&nbsp&nbsp&nbsp护肤套装</a>
                    <div class="subnav" style="height:0px;">
                        <em class="arrow"></em>
                        <p style="background: url(images/body2.png);">
                    <span>
                         <a href="javascript:;"><b>美体塑身</b></a><a>局部瘦身</a><a>瘦身收腹</a><a>丰胸美乳</a><br>
                         <a href="javascript:;"><b>美甲工具</b></a><a>美甲工具</a><br>
                        <a href="javascript:;"><b>身体脱毛</b></a><a>脱毛膏</a><a>脱毛蜡</a><a>脱毛蜡纸</a><a>修复液</a><a>脱毛套装</a><br>
                        <a href="javascript:;"><b>驱蚊/爽身</b></a><a>驱蚊止痒</a><br>
                        <a href="javascript:;"><b>精油</b></a><a>单方精油</a><a>复方精油</a><a>基础油</a><br>
                        <a href="javascript:;"><b>护肤工具</b></a><a>棉签/化妆棉</a><a>面膜纸</a><a>洁面扑</a><a>化妆镜</a><br>
                        <a href="javascript:;"><b>彩妆工具</b></a><a>睫毛夹</a><a>粉扑</a><a>修眉刀</a><a>睫毛夹</a><a>工具套装</a><a>假睫毛</a><a>眉夹</a><a>双眼皮贴</a><a>化妆刷</a><a>眼影棒</a><br>
                        <a href="javascript:;"><b>身体工具</b></a><a>身体护肤工具</a><a>按摩工具</a><a>其他</a>
                    </span>
                        </p>
                    </div>
                </li><hr>
                <li><a href="#">男士护理<br><br>防嗮隔离&nbsp&nbsp&nbsp面膜<br>眼部护理&nbsp&nbsp&nbsp护肤套装</a>
                    <div class="subnav" style="height:0px;">
                        <em class="arrow"></em>
                        <p style="background: url(images/body2.png);">
                    <span>
                        <a href="javascript:;"><b>面部护理</b></a><a>乳液</a><a>洁面</a><a>面霜</a><a>爽肤水</a><a>精华</a><a>防晒霜/乳</a><a>隔离霜/乳</a><a>面膜</a><a>彩妆</a><br>
                        <a href="javascript:;"><b>眼部护理</b></a><a>眼霜</a><a>眼啫喱</a><br>
                        <a href="javascript:;"><b>剃须护理</b></a><a>剃须泡沫/膏</a><a>须后水乳</a><br>
                        <a href="javascript:;"><b>身体护理</b></a><a>沐浴露</a><a>脱毛</a><a>止汗香体</a><a>身体乳</a><br>
                        <a href="javascript:;"><b>护理套装</b></a><a>剃须礼盒/套装</a><a>男士身体护理套装</a><a>男士面部护理套装</a>
                    </span>
                        </p>
                    </div>
                </li><hr>
                <li><a href="#">经典香氛<br><br>防嗮隔离&nbsp&nbsp&nbsp面膜<br>眼部护理&nbsp&nbsp&nbsp护肤套装</a>
                    <div class="subnav" style="height:0;">
                        <em class="arrow"></em>
                        <p style="background: url(images/body2.png);">
                    <span>
                         <a href="javascript:;"><b>女士香水</b></a><a>香水</a><a>淡香水</a><br>
                        <a href="javascript:;"><b>男士香水</b></a><a>香水</a><a>淡香水</a><a>古龙水</a><br>
                        <a href="javascript:;" style="height: 0px;"><b>迷你香水</b></a><a>迷你香水</a><a>香水套装</a><a>礼盒/套装</a><a>迷你套装</a>
                    </span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
        <ul class="nav">
            <li>首页</li>
            <li>SUNSHOP特惠区</li>
            <li>积分购</li>
            <li>美课堂</li>
            <li>手机校妆</li>
            <li><img src="img/sale.png">购物车</li>
        </ul>
    </div>
</div>






<div id="resume">
    <div class="box"></div>
    <div class="box1" >
        <div class="container">
            <h class='hidden-xs hidden-sm page2-title'></h>
            <div class="row">
                <div class="icon-infomation6 col-xs-6 col-sm-6 col-md-3">
                    <img src="images/img/img1.jpg" alt="">
                </div>
                <div class="icon-infomation5 col-xs-6 col-sm-6 col-md-3">
                    <img src="images/img/img2.jpg" alt="">
                </div>
                <div class="icon-infomation4 col-xs-6 col-sm-6 col-md-3">
                    <img src="images/img/bj1.png" alt="">
                </div>
                <div class="icon-infomation1 col-xs-6 col-sm-6 col-md-3">
                    <img src="images/img/code1.png" alt="">
                </div>
                <div class="icon-infomation2 col-xs-6 col-sm-6 col-md-3">
                    <img src="images/img/code2.png" alt="">
                </div>
                <div class="icon-infomation3 col-xs-6 col-sm-6 col-md-3">
                    <img src="images/img/m1.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="box2">
        <div class="container">
            <h class='hidden-xs hidden-sm page2-title'></h>
            <div class="row">
                <div class="icon-infomation5 col-xs-6 col-sm-6 col-md-3">
                    <img src="images/img/img3.jpg" alt="">
                </div>
                <div class="icon-infomation4 col-xs-6 col-sm-6 col-md-3">
                    <img src="images/img/bj2.png" alt="">
                </div>
                <div class="icon-infomation1 col-xs-6 col-sm-6 col-md-3">
                    <img src="images/img/code1.png" alt="">
                </div>
                <div class="icon-infomation2 col-xs-6 col-sm-6 col-md-3">
                    <img src="images/img/code2.png" alt="">
                </div>
                <div class="icon-infomation3 col-xs-6 col-sm-6 col-md-3">
                    <img src="images/img/m1.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="box3">
        <div class="container">
            <h class='hidden-xs hidden-sm page2-title'></h>
            <div class="row">
                <div class="icon-infomation6 col-xs-6 col-sm-6 col-md-3">
                    <img src="images/img/img4.jpg" alt="">
                </div>
                <div class="icon-infomation5 col-xs-6 col-sm-6 col-md-3">
                    <img src="images/img/img5.jpg" alt="">
                </div>
                <div class="icon-infomation4 col-xs-6 col-sm-6 col-md-3">
                    <img src="images/img/bj3.png" alt="">
                </div>
                <div class="icon-infomation1 col-xs-6 col-sm-6 col-md-3">
                    <img src="images/img/code1.png" alt="">
                </div>
                <div class="icon-infomation2 col-xs-6 col-sm-6 col-md-3">
                    <img src="images/img/code2.png" alt="">
                </div>
                <div class="icon-infomation3 col-xs-6 col-sm-6 col-md-3">
                    <img src="images/img/m1.png" alt="">
                </div>
            </div>
        </div>
    </div>
</div>




<!--FOOTER-->
<div class="link" style="background: url(images/footer.png)">
    <div class="link-img">
        <a><img src="img/img1/q1.png"></a>
        <a><img src="img/img1/w1.png"></a>
        <a><img src="img/img1/e1.png"></a>
        <a><img src="img/img1/r1.png"></a>
        <a><img src="img/img1/t1.png"></a>
    </div><hr>
    <div class="link-in">
        <dl>
            <dt>新手指南</dt>
            <dd>用户注册</dd>
            <dd>找回密码</dd>
            <dd>购物流程</dd>
        </dl>
        <dl>
            <dt>安全支付</dt>
            <dd>在线支付</dd>
            <dd>会员储值</dd>
            <dd>货到付款</dd>
        </dl>
        <dl>
            <dt>配送流程</dt>
            <dd>配送说明</dd>
            <dd>验货查收</dd>
            <dd>商品包装</dd>
        </dl>
        <dl>
            <dt>售后服务</dt>
            <dd>100%正品</dd>
            <dd>退换货政策</dd>
            <dd> 退换货流程</dd>
        </dl>
        <dl>
            <dt>关注微信服务号</dt>
            <dd><img src="images/2wm.png"></dd>
        </dl>
        <dl class="big">
            <dt>全国统一客服热线</dt>
            <dd style="font-size: 20px;color: black;">400-036-9090</dd>
            <dd>服务时间：08：30-24：00</dd>
            <dd>客服邮箱：kefu@pingdagroup.com</dd>
            <dd>投诉邮箱：monitor@xzhuang.com</dd>
        </dl>
    </div><hr>
    <footer>
        <a>关于校妆</a>|<a>隐私说明</a>|<a>网站地图</a>|<a>联系我们</a>|<a>品牌合作</a>|<a>安全联盟</a>|
        <p>Copyright 2008-2016 上海校妆科技有限公司 Xzhuang.com 版权所有 沪ICP备15046755号</p>
        <img src="images/footer2.png">
    </footer>

</div>

</body>
</html>

<script>
    window.onscroll = function () {
        widegsubnavone = document.body.scrollTop;
        if(widegsubnavone<300){
            WidgetSubnav.classList.remove('widget-subnav-nav');
        }else {
            NavSub(widegsubnavone);
            Menu.style.display = 'none';
            DisclosureIcon.style.backgroundPosition = 14+'px';
        }
        widegsubnavtwo = widegsubnavone;
        console.log(widegsubnavone)
        if(600<widegsubnavone&&widegsubnavone<1800){
            MovePicture({picture:TechImg,distance:(widegsubnavone/5)+360});
        };
        if(1800<widegsubnavone&&widegsubnavone<2500){
            MovePicture({picture:PowerImg,distance:(widegsubnavone/5)+30});
        };
        if(3000<widegsubnavone&&widegsubnavone<4000){
            MovePicture({picture:ScreenImg,distance:(widegsubnavone/5)-100});
        };
        if (6000<widegsubnavone&&widegsubnavone<6200){
            Camera(CameraImg);
        }
        if (7900<widegsubnavone&&widegsubnavone<9100){
            MovePicture({picture:MtouchImg,distance:(widegsubnavone/10)-700});
        };
        var Mchargea = true;
        if(7100<widegsubnavone&&widegsubnavone<8300){
            if (Mchargea){
                MTouch(MchargeImg);
            }else {
                Mchargea = false;
            }

        }
    }
</script>



<script>
    var oNav = document.querySelector('#nav');
    var obutton = document.querySelector('#nav button');
    var aLi = document.querySelectorAll('#nav ul li');
    var aSubNav = document.querySelectorAll('#nav ul li .subnav');
    var aEm = document.querySelectorAll('.arrow');
    var timer = null;
    var oSubNav = null;
    var oEm = null;
    //第二步的话，就要考虑循环发生事件对象，给他们添加回调函数
    for(var i=1;i<aLi.length;i++){
        //首先把下标记录一下
        aLi[i].index = i;
        //计算下当前subnav的下标

        //事件
        aLi[i].onmouseover = function(){
            //找到当前发生事件li下面的subnav
            oSubNav = aSubNav[this.index -1];
            //找到那个小图标
            oEm = aEm[this.index - 1];

            for(var i=0;i<aSubNav.length;i++){
                aSubNav[i].style.display = 'none';
            }
            //让当前的li下边的那个subnav显示
            oSubNav.style.display = 'block';
//            obutton.style.color='white';
            //清除下计时器
            clearTimeout(timer);
            //位置判断一下
            oNav.offsetWidth - this.offsetLeft > oSubNav.offsetWidth ?
                //居左
                    oSubNav.style.left = this.offsetLeft + 'px' :
                //居右
                    oSubNav.style.right = '0';

            //em那个小图标
            oEm.style.left = 50 + 'px';
        }
        //事件
        aLi[i].onmouseout = function(){
            //离开的时候
            timer = setTimeout(function(){
                oSubNav.style.display = 'none';
            },300)
        }
    }
</script>




